<template>
  <div class="attendance-statistics">
    <el-row :gutter="20">
      <!-- 考勤概览卡片 -->
      <el-col :span="6" v-for="card in attendanceCards" :key="card.title">
        <el-card class="statistics-card">
          <div class="card-content">
            <div class="card-value" :class="card.type">{{ card.value }}</div>
            <div class="card-title">{{ card.title }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 考勤趋势图 -->
    <el-card class="trend-card">
      <template #header>
        <div class="card-header">
          <span>考勤趋势</span>
          <el-radio-group v-model="timeRange" size="small">
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="quarter">本季度</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <div class="chart-container">
        <!-- 这里将添加考勤趋势图表 -->
      </div>
    </el-card>

    <!-- 考勤明细表格 -->
    <el-card class="attendance-list">
      <template #header>
        <div class="list-header">
          <span>考勤明细</span>
          <div class="header-right">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            />
            <el-input
              v-model="searchQuery"
              placeholder="搜索"
              class="search-input"
              size="small"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>

      <el-table :data="filteredAttendance" style="width: 100%">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="department" label="部门" width="120" />
        <el-table-column prop="checkIn" label="签到时间" width="120" />
        <el-table-column prop="checkOut" label="签退时间" width="120" />
        <el-table-column prop="duration" label="工作时长" width="120" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

const timeRange = ref('month')
const dateRange = ref([])
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const attendanceCards = ref([
  {
    title: '正常出勤',
    value: '95%',
    type: 'success'
  },
  {
    title: '迟到',
    value: '3%',
    type: 'warning'
  },
  {
    title: '早退',
    value: '1%',
    type: 'warning'
  },
  {
    title: '缺勤',
    value: '1%',
    type: 'danger'
  }
])

// 模拟考勤数据
const attendance = ref([
  {
    date: '2024-03-20',
    name: '张三',
    department: '研发部',
    checkIn: '09:00',
    checkOut: '18:00',
    duration: '9小时',
    status: '正常'
  },
  // 更多数据...
])

const filteredAttendance = computed(() => {
  return attendance.value.filter(item =>
    Object.values(item).some(val =>
      val.toString().toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  )
})

const getStatusType = (status) => {
  const types = {
    '正常': 'success',
    '迟到': 'warning',
    '早退': 'warning',
    '缺勤': 'danger'
  }
  return types[status] || 'info'
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.attendance-statistics {
  padding: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.card-content {
  text-align: center;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.card-value.success {
  color: #67C23A;
}

.card-value.warning {
  color: #E6A23C;
}

.card-value.danger {
  color: #F56C6C;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.trend-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  gap: 16px;
}

.search-input {
  width: 200px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 